<template>
  <div class="home">
    <div class="header">
      <ul class="ullist">
        <li>
          <IconPhoto></IconPhoto>
        </li>
        <li>
          <KJNovaClipper></KJNovaClipper>
        </li>
        <!-- <li><button>图片裁剪</button></li> -->
        <li>
          <GenerateqRcode></GenerateqRcode>
        </li>
        <li>
          <ManualCutout></ManualCutout>
        </li>
        <li>
          <Intelligentcutout></Intelligentcutout>
        </li>
        <li>
          <PreviewEffect></PreviewEffect>
        </li>
        <li>
          <RevOke></RevOke>
        </li>
        <li>
          <UploadImages></UploadImages>
        </li>
        <li>
          <PreviewWork></PreviewWork>
        </li>
        <li>
          <PreServe></PreServe>
        </li>
        <li>
          <ClearCache></ClearCache>
        </li>
        <li>
          <PureCanvas></PureCanvas>
        </li>
        <li>
          <PublishingWorks></PublishingWorks>
        </li>
        <li class="huabu">
          <!-- <CanvasSize></CanvasSize> -->
          画布大小
          <input type="number" class="xflists" style="font-size: 16px" v-model.number="width" placeholder="Width">
          <input type="number" class="xflist" style="font-size: 16px" v-model.number="height" placeholder="Height">
        </li>
        <li @click="DaoRu">导入 </li>
        <input type="file" accept="image/*" ref="fileInput" @change="handleFileUpload" style="display: none;" />
        <li class="daoguanzi" @click="DaoChu">导出</li>
      </ul>
    </div>
    <div class="main">
      <div class="left">
        <div class="leftone">
          <Left></Left>
          <!-- //渲染iconfont图表   这里还是要点击拖拽到中间画布middle部分-->
        </div>
        <div class="lefttwo">
          <zIndex></zIndex>
        </div>
      </div>

      <div class="middle" :style="{
            width: `${width}px`,
            height: `${height}px`,
            border: `2px solid ${isModified ? 'saddlebrown' : 'transparent'}`,
          }">
        <center :imageUrl="imageUrl">

        </center>
      </div>
      <!-- //画布center -->
      <div class="right">
        <div class="rightone">
          <!-- <img src="../../src/assets/images/meimsao.png" alt="" srcset=""> -->
          <RightTable></RightTable>
          <Jsx></Jsx>
        </div>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>
<script setup lang="ts">
import { RouterView, useRouter } from 'vue-router'
import IconPhoto from '../components/Projectencapsulation/IconPhoto.vue'
import KJNovaClipper from '../components/Projectencapsulation/KJNovaClipper.vue'
import GenerateqRcode from '../components/Projectencapsulation/GenerateqRcode.vue'
import ManualCutout from '../components/Projectencapsulation/ManualCutout.vue'
import Intelligentcutout from '../components/Projectencapsulation/IntelligentCutout.vue'
import PreviewEffect from '../components/Projectencapsulation/PreviewEffect.vue'
import RevOke from '../components/Projectencapsulation/RevOke.vue'
import UploadImages from '../components/Projectencapsulation/UploadImages.vue'
import PreviewWork from '../components/Projectencapsulation/PreviewWork.vue'
import PreServe from '../components/Projectencapsulation/PreServe.vue'
import PureCanvas from '../components/Projectencapsulation/PureCanvas.vue'
import PublishingWorks from '../components/Projectencapsulation/PublishingWorks.vue'
import ClearCache from '../components/Projectencapsulation/ClearCache.vue'
import CanvasSize from '../components/Projectencapsulation/CanvasSize.vue'
import Left from './home/Left.vue'
//引入阿里啊
import RightTable from '../components/RightTable.vue'
import center from '../views/center.vue'//父子传值
import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
import list from '../utils/icondata'
import listarr from '../utils/data'
import { useComponents } from '../stores/counter'
import { storeToRefs } from 'pinia'
import zIndex from "../components/zIndex/index.vue"
// import Jsx from  '../views/aaa.vue'
const { canvasComponents } = storeToRefs(useComponents())
const store = useComponents()
onMounted(() => {
  let res = list.value
  console.log(res, "ressdsagkdjsakjfdh nhkrdslt");
  // downloadImage(imgSRC)//调用下载图片函数
})
const AllSRC: any = ["../../src/assets/images/Masked Beauty.png", "../../src/assets/images/auto.png"]
console.log(AllSRC, "120");

const list1 = ref([
  {
    // ... 其他属性  
    imgsrc: '../../src/assets/images/Masked Beauty.png', // 使用相对于构建输出目录的路径  
  },
]);
let DaoChu = () => {
  console.log(111);
  const imgSRC: any = list1.value[0].imgsrc
  const DownPhoto = "MVAAA.jpg"
  //createElement 是一个常用于 Web 开发中的方法，主要用于创建新的 DOM（文档对象模型）元素。这个方法通常与 JavaScript 的 document 对象一起使用，允许开发者动态地创建 HTML 元素。
  let CB = document.createElement("a")
  CB.href = imgSRC
  CB.download = DownPhoto
  CB.style.display = "none"
  document.body.appendChild(CB)
  CB.click()
  document.body.removeChild(CB)
}

const imageUrl = ref('')
const fileInput :any= ref(null)
const fileToUpload = ref(null)
let DaoRu = () => {
  alert('1111')
  // fileInput.value.style.display = 'block' // 一般情况下不需要这一步  
  // 直接触发点击事件  
  fileInput.value.click()
  // 如果需要，可以立即再次隐藏文件输入框  
  // fileInput.value.style.display = 'none' // 同样，一般不需要这一步
}


// 处理文件上传（这里只是读取文件并创建一个Blob URL）  
const handleFileUpload = (event: { target: { files: any[] } }) => {
  const file = event.target.files[0]
  if (!file) return

  // 创建一个Blob对象的URL表示形式  
  const objectURL = URL.createObjectURL(file)
  imageUrl.value = objectURL
  fileToUpload.value = file // 可以选择存储文件对象用于后续处理  
}

// 监听组件卸载，清理创建的URL对象  
onBeforeUnmount(() => {
  if (imageUrl.value) {
    URL.revokeObjectURL(imageUrl.value)
  }
})

const BoderW = 841;
const BoderH = 592;
const width = ref(BoderW);
const height = ref(BoderH)
const isModified = ref(true);
// 监听 width 和 height 的变化，当它们变化时，设置 isModified 为 true  
watch([width, height], () => {
  isModified.value = true;
});

// localStorage.getItem(" canvasComponents")
</script>
<style scoped lang="scss">
* {
  font-weight: 800;
  font-size: 52px;
}

.home {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.header {
  height: 50px;
  border: 1px solid #eee;
  cursor: pointer; //小手

  .ullist {
    display: flex;
    justify-content: space-around;
    height: 50px;
    line-height: 50px;


    li {
      font-size: 16px;
      padding-left: 3px;
      border: 1px solid #eee;
    }

    .huabu {
      .xflist {
        width: 51px;
        font-weight: normal;
        margin-left: 10px;
        font-size: 16px;
      }

      .xflists {
        width: 51px;
        font-weight: normal;
        margin-left: 10px;
      }
    }

    .daoguanzi {
      position: relative;
      right: 0%;
    }
  }
}

.main {
  flex: 1;
  overflow: hidden;
  border: 1px solid #eee;
  display: flex;
  // position: relative;

}

.footer {
  height: 50px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left {
  width: 20%;
  height: 100%;
  border: 1px solid #eee;

  .leftone {
    height: 50%;
    width: 100%;
    border: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
  }

  .lefttwo {
    height: 50%;
    border: 1px solid #eee;
  }
}

.middle {
  width: 60%;
  height: 100%;
  border: 4px solid #bc3333;
  //  background: yellowgreen；
}


.right {
  width: 25%;
  height: 100%;
  border: 1px solid #eee;
  // position: absolute;
  right: 0%;

  .rightone {
    height: 100%;
    border: 1px solid #eee;
  }
}

.el-menu-vertical-demo {
  width: 100%;
  height: 100%;
}
</style>
<!-- ../components/Projectencapsulation/UploadImages.jsx -->